<template>
  <div class="patient-list-container">
    <div class="patient-list">
      <div
        v-for="patient in patientList"
        :key="patient.patientCode"
        class="patient-card"
        @click="goDetail(patient.patientCode)"
      >
        <div class="patient-info">
          <span class="ward">{{ patient.wardName }}</span>
          <span class="bed">{{ patient.bedCode }}</span>
          <span class="name">{{ patient.name }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import htpp from '@/api/http'

const patientList = ref([])
const router = useRouter()

const getPatients = () => {
  htpp.get('/api/DoctorManageController/GetPateientList').then(res => {
    console.log(res);
    
    patientList.value = res.data || []
  })
}

const goDetail = (patientCode) => {
  // 找到当前患者信息
  const currentPatient = patientList.value.find(p => p.patientCode === patientCode);
  
  router.push({
    path: '/PatientDetail2',
    query: { 
      patientCode,
      patientName: currentPatient.name,
      patientAge: currentPatient.age,
      patientSex: currentPatient.sex
    }
  })
}

onMounted(() => {
  getPatients()
})
</script>

<style scoped>
.patient-list-container {
  width: 100%;
  min-height: 400px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 60px;
}
.patient-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 60px;
  justify-items: center;
  width: 700px;
}
.patient-card {
  min-width: 160px;
  max-width: 220px;
  padding: 12px 24px;
  border: 1px solid #bbb;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-size: 16px;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.03);
  transition: box-shadow 0.2s, border 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.patient-card:hover {
  border: 1.5px solid #19bfff;
  box-shadow: 0 4px 16px 0 rgba(25,191,255,0.08);
}
.patient-info span {
  margin-right: 10px;
  font-size: 16px;
}
.patient-info .name {
  font-weight: bold;
  color: #333;
}
</style>
